<!DOCTYPE html>
<html>
<meta charset="UTF-8" />

<head>
    <title>绑定样式</title>

    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        .happy {
            background-color: red;
        }

        .sad {
            background-color: gray;
        }

        .normal {
            background-color: yellow;
        }

        .atguigu1 {
            color: rebeccapurple;
        }

        .atguigu2 {
            color: royalblue;
        }

        .atguigu3 {
            overflow: auto;
            /*溢出隐藏*/
            text-overflow: ellipsis;
            /*以省略号...显示*/
            /* white-space: nowrap; */
            /*强制不换行*/
        }

        /* 

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

作者：hi武林高手
链接：https://www.jianshu.com/p/53ee7532151d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
         */
    </style>
    <script type="text/javascript" , src="../js/vue.js">

    </script>
</head>

<body>

    <div id="root">
        <div class="basic happy" :class="a" id="demo" @click="change">test {{name}} </div>

        <br />
        <div class="basic " :class="classObj">test {{name}} </div><br><br />
        <!-- style 写法 -->
        <!-- overflow:true text-overflow: ellipsis -->
        <div class="basic atguigu3" :style="{fontSize:  size+'px' }"> div 中style{{ name}} </div><br />

        <div class="basic" :style="styleObj"> vue管理的 style </div><br />
        <!-- 可 数组 可对象  -->
    </div>
    <!-- :可以绑定 clss 样式    
        样式不确定需要动态决定  
        id #  class .
     -->

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data() {
                return {
                    name: "就是name",
                    a: "normal",
                    classObj: { atguigu1: false, atguigu2: true },
                    size: 50,
                    styleObj: {
                        fontSize: '50px',
                        color:'pink',

                    }
                }
            },
            methods: {
                change() {
                    // document.getElementById('demo').className = 'basic sad'  操作dom 
                    // this.a = 'happy'
                    let ran = Math.floor(Math.random() * 3)
                    console.log(ran)
                    const arr = [
                        'happy',
                        'sad',
                        'normal'
                    ]
                    this.a = arr[ran]          //Math.random() 0-1 不等1
                }
            },
        })    
    </script>
</body>

</html>